<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title th:text="${titleName}"></title>
    <link rel="stylesheet" href="/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="/adminlte/css/adminlte.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <link rel="stylesheet" href="/toastr/toastr.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.css"  crossorigin="anonymous">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <header th:replace="admin/common/header::header">

    </header>
    <aside th:replace="admin/common/left::left">

    </aside>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark" th:text="${titleName}"></h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/index/index">主页</a></li>
                            <li class="breadcrumb-item active" th:text="${titleName}"></li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="card-body" style="position: absolute;">
                <video autoplay playsinline width="600" height="500" style="position: absolute;"></video>
<!--                <img id="img" style="width: 500px;height: 400px;position: absolute;padding:12px 0px;"/>-->
                <canvas width="600" height="500" style="position: absolute;"></canvas>
            <button id="scanBtn" class="btn btn-primary btn-lg" style="position: relative;left: 0px;top: 400px;">扫描</button>
            <button id="submitBtn" class="btn btn-primary btn-lg" style="position: relative;left: 50px;top: 400px;">提交</button>
        </div>

        </div>
    </div>

    <aside class="control-sidebar control-sidebar-dark">
        <div class="p-3">
            <h5>通知</h5>
            <p>内容</p>
        </div>
    </aside>

    <footer th:replace="admin/common/footer::footer">
    </footer>
</div>
<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/adminlte/js/adminlte.min.js"></script>
<script src="/toastr/toastr.min.js"></script>

    <script type="text/javascript">
        let flag = true,
        video = document.querySelector('video'),
        canvas = document.querySelector('canvas'),
        cxt = canvas.getContext('2d');

    let videoElement = document.querySelector('video');
    navigator.mediaDevices.enumerateDevices()
        .then(gotDevices).catch(handleError);

    function gotDevices(deviceInfos) {
        let constraints = new Array(5);
        let id = 0;
        for (let i = 0; i !== deviceInfos.length; ++i) {
            let deviceInfo = deviceInfos[i];
            if (deviceInfo.kind === 'videoinput') {
                constraints[id] = {
                    video: {
                        deviceId: deviceInfo.deviceId
                    }
                };
                id = id +1;
            }
        }

        if (window.stream) {
            window.stream.getTracks().forEach(function(track) {
                track.stop();
            });
        }

        navigator.mediaDevices.getUserMedia(constraints[0]).
        then(gotStream).catch(handleError);
    }

    function gotStream(stream ) {
        videoElement.srcObject = stream;
    }
    function handleError(error) {
        console.log('Error: ', error);
    }

    $(document).ready(function(){
        $("#scanBtn").click(function(){
            cxt.clearRect(0, 0, canvas.width, canvas.height);
            cxt.drawImage(video, 0, 0, canvas.width, canvas.height);
            flag = false;
            // $("#img").attr("src",canvas.toDataURL());

        })

        $("#submitBtn").click(function(){
            let dataurl=canvas.toDataURL();
            let arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            let blob= new Blob([u8arr], {type:mime});
            let fd = new FormData();
            fd.append("file", blob);
            $.ajax({
                url: "/ocr/updatePic",
                type:"POST",
                data:fd,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success:function(data){
                    if("200"==data.code){
                        toastr.success("提交成功");
                    }else{
                        toastr.error(data.message);
                    }
                }
            })
        })
    })


</script>

</body>
</html>
